<template>
  <a-modal
    ref="modal"
    :title="`目录${title}`"
    :width="640"
    destroyOnClose
    :visible="visible"
    :confirmLoading="loading"
    @ok="submit"
    @cancel="visible=!visible"
  >
    <a-spin :spinning="loading">
      <a-form :form="form">

        <a-form-item
          label="菜单类型"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group  @change="typeChange" v-decorator="['type', {initialValue: editForm.type?editForm.type:0}]" buttonStyle="solid">
            <a-radio-button :value="0">一级菜单</a-radio-button>
            <a-radio-button :value="1">子菜单</a-radio-button>
            <a-radio-button :value="2">按钮/权限</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          :label="type===2?'按钮/权限':'菜单名称'"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input :placeholder="type===2?'请输入按钮/权限':'请输入菜单名称'" v-decorator="['menuName', {initialValue: editForm.menuName,rules: rules.menuName}]"/>
        </a-form-item>
        <a-form-item
          v-if="type!==0"
          label="上级菜单"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-tree-select
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            :treeData="menuList"
            placeholder='请选择父目录'
            treeDefaultExpandAll
            treeCheckStrictly
            :getPopupContainer="(trigger)=>{return  trigger.parentElement}"
            v-decorator="['parentId', {initialValue: editForm.parentId?editForm.parentId+'':'',rules: rules.parentId}]"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item
          v-if="type!==2"
          label="路由地址"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input placeholder="请输入路由地址" v-decorator="['routerUrl', {initialValue: editForm.routerUrl,rules: rules.routerUrl}]"/>
        </a-form-item>
        <a-form-item
          v-if="type!==2"
          label="组件"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input placeholder="请输入组件" v-decorator="['componentName', {initialValue: editForm.componentName,rules: rules.componentName}]"/>
        </a-form-item>

        <a-form-item
          v-if="type===0"
          label="菜单图标"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input placeholder="请输入菜单图标" v-decorator="['menuIcon', {initialValue: editForm.menuIcon,rules: rules.menuIcon}]"/>
        </a-form-item>
        <a-form-item
          label="权限标识"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input placeholder="菜单组件:权限code 例如 user:add" v-decorator="['permsCode', {initialValue: editForm.permsCode}]"/>
        </a-form-item>
        <a-form-item
          label="排序"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input placeholder="请输入排序" v-decorator="['priority', {initialValue: editForm.priority}]"/>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>

  const rules = {
    menuName: [
      { required: true, message: '名称不能空！' },
    ],
    parentId: [
      { required: true, message: '父目录不能空！' },
    ],
    routerUrl: [
      { required: true, message: '前端路由不能空！' },
    ],
    componentName: [
      { required: true, message: '组件不能空！' },
    ],
    menuIcon: [
      { required: true, message: '菜单图标不能空！' },
    ],
  }

  import saveMixins from '../../../../common/mixins/saveMixins'

  import {save} from '../../../../api/base/menu'

  export default {
    name: 'save',
    data() {
      return {
        rules: rules,
        roles:[],
        menuList:[],
        type:0
      }
    },
    mixins: [saveMixins],

    methods:{
      commit(values){
        return save(values);
      },
      addPlus(data){
        this.menuList=this.convertMenuList(data);
        this.type=0;
        this.add()
      },
      editPlus(record,data){
        this.type=record.type;
        this.menuList=this.convertMenuList(data);
        this.edit(record)
      },
      typeChange(data){
        this.type=data.target.value;
      },
      convertMenuList(menu){
        if(!menu){
          return []
        }else {
          return menu.map(item=>{
            let rs={};
            rs.title=item.menuName;
            rs.value=item.id+'';
            rs.key=item.id;
            if(item.children&&item.children.length>0){
              rs.children=this.convertMenuList(item.children);
            }
            return rs;
          })
        }
      },
      submit(){
        if(this.form.getFieldValue("parentId")&&this.form.getFieldValue("parentId")===this.editForm.id){
          this.message.error("上级菜单不能是当前菜单");
          return;
        }

        const { form: { validateFields } } = this
        validateFields((err, values) => {
          if (!err) {
            values = { ...this.editForm, ...values }
            this.loading = true
            save(values).then(res=> {
              if (res.status === 0) {
                this.$message.success("保存成功")
                this.$emit('refresh')
                this.visible = false
              } else {
                this.$message.error(res.msg)
              }
              this.loading = false

            }).catch(res => {
              this.loading = false

            })


          }
        })

      }
    }
  }
</script>

<style scoped>

</style>